<template>
	<view class="container worker-index-container">
		<view>
			<view class="page-list" @click="jump('/pagesWorker/writeOff/writeOff')">
				<image class="list-img" :src="$fileUrl+'worker-idx-1.png'" mode="widthFix"></image>
				<view class="list-title">核销助手</view>
				<view class="list-tips">1</view>
			</view>
			<view class="page-list" @click="jump('/pagesWorker/reservation/list')">
				<image class="list-img" :src="$fileUrl+'worker-idx-2.png'" mode="widthFix"></image>
				<view class="list-title">预约到店</view>
				<view class="list-tips list-tips-show">有 {{appointCount}} 条预约待处理</view>
			</view>
			<view class="page-list" @click="jump('/pagesWorker/patient/list')">
				<image class="list-img" :src="$fileUrl+'worker-idx-3.png'" mode="widthFix"></image>
				<view class="list-title">患者管理</view>
				<view class="list-tips">1</view>
			</view>
			<view class="page-list" @click="jump('/pagesWorker/worker/detail')">
				<image class="list-img" :src="$fileUrl+'worker-idx-4.png'" mode="widthFix"></image>
				<view class="list-title">个人信息</view>
				<view class="list-tips">1</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
import userApi from '../../common/userApi';
import { hideLoading, showLoading } from '../../common/util';
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	onMounted(async () => {
		await getPageList()
	})
	const appointCount=ref(0)
	const getPageList = async () => {
		showLoading()
		try {
			const params = {
				pageNum:1,
				pageSize:2,
				status: 0,
			}
			const res = await userApi.getAppointments(params)
			appointCount.value=res.data.total
		} finally {
			hideLoading()
		}
	}
</script>


<style lang="scss">
	.worker-index-container {
		padding: 25rpx;
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		
		.page-list{
			display: inline-block;
			width: 48%;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 30rpx;
		}
		.page-list:nth-child(2n){
			margin-left: 2%;
		}
		.list-img{
			width: 62rpx;
			height: 62rpx;
		}
		.list-title{
			font-size: 32rpx;
			color: #222222;
		}
		.list-tips{
			font-size: 24rpx;
			background-color: rgba(252, 74, 64, 0.20);
			color: #FC4A40;
			opacity: 0;
			margin-top: 15rpx;
			padding: 4rpx 10rpx;
			border-radius: 4rpx;
		}
			
		.list-tips-show{
			opacity: 1;
		}
	}
</style>